<script lang='ts' setup>
import {Site} from "@/config/base";
import {ref} from "vue";
import {handleAssetsUrl} from "@/utils/fileConvert.ts";

const menus = ref([
  {
    name: "项目说明",
    href: "https://gitee.com/xu-zhanwei/chatanywhere/blob/master/README.md",
  },
  {
    name: "支持我们",
    href: "https://gitee.com/xu-zhanwei/chatanywhere/blob/master/Support.md",
  },
  {
    name: "免费缘由",
    href: "https://gitee.com/xu-zhanwei/chatanywhere/blob/master/purpose.md",
  },
  // {
  //   name: "隐私保护",
  //   href: "https://gitee.com/xu-zhanwei/chatanywhere/blob/master/security.md",
  // },
])

</script>
<template>
  <div class="footer flex-c">
    <div class="center pc flex">
      <div class="group flex">
        <div class="logo flex-c">

          <div class="name flex-c">
            <img src="@/assets/logo-text.webp" alt="zaiwen">
            <span class="en">zaiwen.top</span>
          </div>
        </div>
        <div class="item flex-c">
          <ul>
            <li class="title">快捷入口</li>
            <li>
              <router-link to="/explanation">帮助中心</router-link>
            </li>
            <li>
              <router-link to="/log">更新日志</router-link>
            </li>
            <li><a href="https://wj.qq.com/s2/13088887/7112/" target="_blank">企业合作</a></li>
            <li>
              <a href="https://gitee.com/xu-zhanwei/chatanywhere/blob/master/README.md#%E7%83%AD%E7%83%88%E6%9C%9F%E7%9B%BC%E5%A4%A7%E5%AE%B6%E4%B8%BA%E6%9C%AC%E9%A1%B9%E7%9B%AE%E6%8F%90%E4%BE%9B%E6%94%AF%E6%8C%81"
                 target="_blank"> 加入我们 </a>
            </li>
          </ul>
        </div>
        <div class="item flex-c">
          <ul>
            <li class="title">更多</li>
            <li v-for="item in menus"><a :href="item.href" target="_blank">{{ item.name }}</a></li>
            <li>
              <router-link to="/user-agreement">用户协议</router-link>
            </li>
          </ul>
        </div>

      </div>

      <div class="contact">
        <div class="item flex-c ">
          <ul>
            <li class="title">联系我们</li>
            <li class="email">zw-xu18@mails.tsinghua.edu.cn</li>
            <li class="other_contact">
              <!--              <img src="@/assets/images/contact/wechat.svg" alt="">-->
              <!--              <img src="@/assets/images/contact/qq.svg" alt="">-->
            </li>
          </ul>
        </div>
      </div>
    </div>


    <div class="center mobile flex-c">
      <div class="group">
        <div class="item flex-c">
          <p class="title flex">快捷入口<img src="@/assets/images/footer/right_arrow.svg" alt="">
          </p>

          <ul>
            <li>
              <router-link to="/explanation">帮助中心</router-link>
            </li>
            <li>
              <router-link to="/log">更新日志</router-link>
            </li>
            <li><a href="https://wj.qq.com/s2/13088887/7112/" target="_blank">企业合作</a></li>
            <li>
              <a href="https://gitee.com/xu-zhanwei/chatanywhere/blob/master/README.md#%E7%83%AD%E7%83%88%E6%9C%9F%E7%9B%BC%E5%A4%A7%E5%AE%B6%E4%B8%BA%E6%9C%AC%E9%A1%B9%E7%9B%AE%E6%8F%90%E4%BE%9B%E6%94%AF%E6%8C%81"
                 target="_blank"> 加入我们 </a>
            </li>
          </ul>
        </div>
        <div class="item flex-c">
          <p class="title">更多<img src="@/assets/images/footer/right_arrow.svg" alt=""></p>

          <ul>
            <li v-for="item in menus"><a :href="item.href" target="_blank">{{ item.name }}</a></li>
            <li>
              <router-link to="/user-agreement">用户协议</router-link>
            </li>
          </ul>
        </div>
      </div>

      <div class="contact">
        <div class="item">
          <p class="title">联系我们</p>
          <ul>
            <li class="email">zw-xu18@mails.tsinghua.edu.cn</li>
            <li class="other_contact">
              <a-popover title="公众号二维码">
                <div class="flex">
                  <img src="@/assets/images/contact/wechat.svg" alt="">
                </div>
                <template #content>
                  <a-image
                      width="200"
                      :src="handleAssetsUrl('@/assets/images/index/wechat.jpg')"
                  />
                </template>
              </a-popover>

              <!--              <img src="@/assets/images/contact/qq.svg" alt="">-->
            </li>
          </ul>
        </div>
      </div>

      <div class="logo flex-c">

        <div class="name flex-c">
          <img src="@/assets/logo-text.webp" alt="zaiwen">
          <span class="en">zaiwen.top</span>
        </div>
      </div>


    </div>


    <div class="copyright ">
      <div class="inner_content flex">
        <p>Copyright © 2023-{{ new Date().getFullYear() }} 在问科技有限公司 All Rights Reserved</p>
        <a class="desc" href="https://beian.miit.gov.cn" target="_blank">
          <p>{{ Site.filing_number }}</p>
        </a>
      </div>

    </div>
  </div>
</template>
<style lang='scss' scoped>
.footer {
  width: 100%;
  border-top: 1px var(--color-fill-1) solid;
  z-index: 1;
  border-top: 1px solid #e9eff7;


  .pc {
    border-top: 1px #0045F5 solid;

    width: 100%;
    padding: 80px 0;
    align-items: flex-start;

    .logo {

      img {
        //width: 98px;
        height: 92px;

      }

      .name {
        flex-direction: row;
        margin-top: 20px;

        .en {
          color: #000;
          font-family: "Source Han Sans CN";
          font-size: 18px;
          opacity: 0.7;
        }
      }
    }

    .group {
      width: 100%;
      justify-content: space-between;
      flex: 1;
      align-items: flex-start;

      .item {
        align-items: flex-start;

        .title {
          margin-bottom: 24px;
          color: #000;
          font-family: "Source Han Sans CN";
          font-size: 20px;
          font-weight: 500;

        }

        ul > li {
          color: #323232;
          font-family: "Source Han Sans CN";
          margin-bottom: 16px;

          & > a:hover {
            text-decoration: underline;
          }

          a {
            color: #39435e;
          }
        }
      }


    }

    .contact {
      flex: 1;
      padding-right: 24px;

      .item {
        align-items: flex-end;

        .title {
          color: #000;
          font-family: "Source Han Sans CN";
          font-size: 20px;
          font-weight: 500;
        }

        .email {
          padding-top: 24px;
        }
      }

      .other_contact {
        padding-top: 40px;

        img:first-child {
          padding-right: 16px;
        }
      }


    }


  }


  .mobile {
    display: none;
    padding: 0 14px;
    flex-direction: column;
    align-items: flex-start;
    border: 1px solid #0045F5;
    width: 100%;
    box-sizing: border-box;

    ul {
      display: flex;
      justify-content: space-between;
    }

    .logo {
      margin-left: -14px;
      margin-top: 35px;

      img {
        width: 71.54px;
      }

      .name {
        flex-direction: row;

        .en {
          color: #000;
          font-family: "Source Han Sans CN";
          font-size: 18px;
          opacity: 0.7;
        }
      }
    }


    .group {
      flex-direction: row;
      width: 100%;


      .item {
        flex: 1;
        align-items: flex-start;
        overflow: hidden;


        ul {
          width: 100%;
          padding-top: 20px;
        }

        li {
          word-wrap: break-word;

          color: #323232;
          font-family: "PingFang SC";
          font-size: 14px;

        }
      }
    }

    .contact {
      display: flex;

      ul {
        flex-direction: column;
      }
    }

    .other_contact {
      padding-top: 20px;

      img:first-child {
        padding-right: 16px;
      }
    }


    .title {
      margin-bottom: 12px;
      padding-top: 40px;
      align-items: center;

      img {
        padding-left: 5.43px;
      }
    }

  }

  @media screen and (max-width: 750px) {
    .pc {
      display: none;
    }

    .mobile {
      display: flex;
    }

    .copyright {
      background-color: white !important;
      padding: 0 !important;

      .inner_content {
        flex-direction: column;
        align-items: flex-start;

        p {
          color: #323232 !important;
          font-family: "PingFang SC" !important;
          font-size: 12px !important;
          padding: 24px 0 0 14px;
        }

        p:last-child {
          padding: 24px 0 22px 14px;
        }
      }
    }
  }


  .copyright {

    //border-top: 1px solid #e9eff7;
    //width: 1600px;
    height: 56px;
    padding: 0 24px;
    background: #000;
    width: 100%;


    .inner_content {
      justify-content: space-between;
      height: 100%;
      margin: 0 auto;

      p {
        color: #FFF;
        font-family: "Source Han Sans CN";
        font-size: 14px;
        font-style: normal;
        font-weight: 400;
        line-height: normal;
      }

      .desc {
        color: #FFF;
        font-family: "Source Han Sans CN";
        font-size: 16px;
        font-style: normal;
        font-weight: 400;
        line-height: normal;
      }
    }
  }

  //.desc {
  //  margin-top: 10px;
  //  color: rgba(25, 37, 68, 0.6);
  //}
}
</style>
